<template>
  <div class="home">
        <ul class="sus-ul">
            <a href="#"><li>
              <div class="sus-li">
                <img @click="showNum = true" src="../assets/img/phone.png" style="width:25px">
              </div>
              </li>
            </a>
            <a href="#">
              <li>
                <div class="sus-li">
                  <img @click="showcode = true" src="../assets/img/WeChat2.png">
                </div>
              </li>
            </a>
        </ul>
    <!-- <swiper :options="swiperOption"  class="swiper-fxl">
      <swiper-slide v-for="item in banner" :key = "item.id"  class="slide-item" :style="`background-image:url('${item.img}');`">
      </swiper-slide>        
      <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
      <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
  </swiper> -->
   <el-carousel :interval="2000" arrow="always" class="swiper-fxl">
    <el-carousel-item v-for="item in banner" :key = "item.id"  class="slide-item" :style="`background-image:url('${item.img}');`">
    </el-carousel-item>
  </el-carousel>
        <!-- <Aboutus></Aboutus> -->
      <!-- <News></News>
      <img width="100%" src="../assets/img/mid_bg.png" alt="">
        <Services></Services>
      <Contactus></Contactus> -->

        <div class="show-code" v-show="showcode || showNum">
        <img width="50px" style=" position: absolute;top: 70px; right: 70px; cursor: pointer;"  @click="showcode = showNum = false" src="../assets/img/close (3).png" alt="">
        <div v-show="showcode">
          <img width="300px" src="../assets/img/code_num.png" alt="">
        </div>
        <div v-show="showNum">
            <p style="color: #fff;
    font-size: 32px;
    font-weight: 800;">
              联系电话：0755-2798 1268
            </p>
        </div>
      </div>
  </div>
</template>

<script>
// @ is an alias to /src
import 'swiper/dist/css/swiper.css'
// import News from '../components/News'
// import Services from "../components/Services";
// import Aboutus from "../components/Aboutus";
// import Contactus from "../components/Contactus"

export default {
  name: 'home',
  data() {
      return {
        swiperOption: {
          spaceBetween: 30,
          effect: 'fade',
          autoplay: {
          delay: 3000,
          loop : true,          
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          },
        },
        showcode: false,
        showNum: false,
        banner: ''
      }
    },
    created() {
      this.$request({url:'/banner/'}).then(result => {
        const {data} = result
        this.banner = data
      })
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    mounted() {
      // current swiper instance
      // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
    },
    methods: {
    },
  components: {
  }
}
</script>

 <style lang="stylus">
 .el-carousel__container
  height 100%
 .el-carousel__indicators
  display none
 .el-carousel__arrow
  width 50px
  height 50px
  font-size 24px
  font-weight 600
  background-color rgba(31,45,61,.5)
 .show-code
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  z-index 999
  background-color rgba(158, 158, 158, 0.85);
  display flex
  flex-direction column
  justify-content center
.sus-ul
  position fixed
  right 0
  top 25%
  z-index:98
  width 47px
  background-color #31353d
  padding 25px 0px 12px 8px;
  img
    width 25px
@media (max-width 765px)
  .sus-ul
    display none

.sus-li
  right 0
  background-color #31353d
  margin-bottom 10px
  padding 0px 10px 0px 10px

.home
  width 100%
  height 100%
  margin: 0 auto;
  margin-top 92px;
  text-align left
  .swiper-fxl
    height: 100vh;
    width: 100%;
    bottom: 0;
    box-sizing: border-box;
    padding-top: 46px;
    padding-bottom: 46px;
    margin-top: -46px;
  @media (max-width: 769px)
    .swiper-fxl
      height: auto;
      top: 82px;
      width: 100%;
      bottom: 174px;
      position: fixed;
      z-index: 1

  .slide-item
    width 100%
    background-size:cover;
    background-repeat:no-repeat;
    background-position center
.block
  max-width: 1160px;
  margin 0 auto
  padding 40px 20px
  .title
    height 80px
    box-sizing border-box
    padding-top 30px
    color #393939
    border-bottom 1px solid #393939
    div
      height 20px
      line-height 20px
      font-weight 800
      font-size 24px
      &.min
        color #393939
        padding-left 5px
        line-height 24px
        font-size 14px
        font-weight 400
    .go-more
      display: inline-block;
      float: right;
      margin-top: -20px;
      color: #d21c27; 
  .content
    width 100%
    padding 40px
    box-sizing border-box
    .item
      background-color #f1f1f1
      box-sizing border-box
      padding 30px 20px
      border-radius 5px
      &:hover
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
      .item-title
        font-size 17px
        line-height 40px
        height 40px
        font-weight 500
        span
         font-size 14px
         font-weight 400
      .item-info
        font-size 14px
        line-height 25px
        text-align justify
        height 70px
        overflow hidden
        text-overflow:ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      .go-detail
        margin-top 20px
        text-align right
        a
          font-weight 500px
          font-size 14px
          color #d21c27

  @media (max-width: 769px)
    .content
      padding 20px 0
  .aboutus
    padding 60px 0
    font-size 14px
    line-height 22px
    color #6d6d6d
    .au-title
      color #262626
      font-weight 800
      font-size 16px
      height 80px
      line-height 80px
  @media (max-width: 769px)
    .aboutus
      padding 0
      padding-bottom 40px
      .au-title
        text-align center
@media (max-width 765px)
  .block
    padding 20px
    .title
      height 50px
      padding-top 0
      div
        font-size 18px
        &.min
          font-size 12px
.contactus
  max-width: 769px;
  margin 0 auto
  padding 40px 20px
  .title
    height 80px
    box-sizing border-box
    padding-top 20px
    text-align center
    border-bottom 1px solid #000
    div
      height 20px
      line-height 20px
      font-size 24px
      font-weight 800
      &.min
        padding-left 5px
        line-height 30px
        font-weight 400
        font-size 14px
  .contact-title
    font-size 16px
    height 60px
    line-height 60px
    font-weight 800
  .contact-info
    font-size 14px
    line-height 24px
    font-weight 500
  .contact-map
    height 400px
    padding 20px 0 60px 0
@media (max-width 765px)
  .contactus
    padding 20px
    .title
      height 50px
      padding-top 0
      div
        font-size 18px
        &.min
          font-size 12px




@media (max-width 765px)
  .home
    margin-top 0px
    
</style>

